<template>
  <div class="flex">
    <el-button
      v-if="isAdmin || isOwner || webAdmin"
      size="mini"
      type="success"
      :plain="issue.essence"
      v-text="issue.essence ? '取消精华帖' : '设为精华帖'"
      class="m-r-16"
      @click="handleEssence"
      :loading="isLoading.essence"
    />
    <el-tooltip :content="tooltip.collect">
      <el-button size="mini" @click="vote('collect')" :loading="isLoading.collect">
        <svg-icon v-show="!isLoading.collect" :icon-name="icon.collect"/>
      </el-button>
    </el-tooltip>
    <el-tooltip :content="tooltip.like">
      <el-button size="mini" @click="vote('like')" :loading="isLoading.like">
        <svg-icon v-show="!isLoading.like" :icon-name="icon.like"/>
        {{ issue.voteCount.like }}
      </el-button>
    </el-tooltip>
    <el-tooltip :content="tooltip.dislike">
      <el-button size="mini" @click="vote('dislike')" :loading="isLoading.dislike">
        <svg-icon v-show="!isLoading.dislike" :icon-name="icon.dislike"/>
        {{ issue.voteCount.dislike }}
      </el-button>
    </el-tooltip>
  </div>
</template>

<script>
import * as format from './format';

export default {
  name: 'IssueVoteButtons', // 问题的点赞等按钮
  data() {
    return {
      isLoading: {
        collect: false,
        like: false,
        dislike: false,
        essence: false,
      },
    };
  },
  computed: {
    issue() { return this.$store.state.currentIssue; },
    curUser() { return this.$store.state.currentUser; },
    curSpace() { return this.$store.state.currentSpace; },
    icon() {
      return {
        collect: this.issue.voteState.collect ? 'star-fill' : 'star',
        like: this.issue.voteState.like ? 'like-fill' : 'like',
        dislike: this.issue.voteState.dislike ? 'dislike-fill' : 'dislike',
      };
    },
    tooltip() {
      return {
        collect: this.issue.voteState.collect ? '已收藏' : '收藏',
        like: this.issue.voteState.like ? '已赞' : '点赞',
        dislike: this.issue.voteState.dislike ? '已踩' : '点踩',
      };
    },
    isAdmin() { return this.curSpace.adminIds.includes(this.curUser.id); },
    isOwner() { return this.curSpace.owner.id === this.curUser.id; },
    webAdmin() { return this.curUser.admin; },
  },
  methods: {
    // 收藏、点赞、点踩
    vote(action) {
      this.isLoading[action] = true;
      const voteParams = this.initVoteParams(action);
      this.$api.other.vote(voteParams)
        .then((res) => {
          this.voteMessage(action, voteParams.voteState);
          this.$store.dispatch('setCurrentIssue', format.formatIssue(res.data)); // 更新问题
          this.$root.$emit('checkScore', this.$va.initScoreType(action, voteParams.voteState));
        })
        .catch(() => {})
        .then(() => { this.isLoading[action] = false; });
    },
    // 点赞、收藏所需参数
    initVoteParams(action) {
      return {
        votePosition: this.$C.vote.position.issue, // 对资源点赞
        votePositionId: this.issue.id, // 当前资源id
        voteAction: this.$C.vote.action[action], // 点赞、点踩
        voteState: !this.issue.voteState[action],
      };
    },
    // 点赞、收藏的提醒
    voteMessage(action, voteState) {
      if (voteState) { // 正向操作才有提醒
        if (action === 'like') this.$message.success('点赞成功');
        else if (action === 'collect') this.$message.success('收藏成功');
      }
    },
    // 设置精华
    handleEssence() {
      this.isLoading.essence = true;
      this.$api.spaceIssues.essence({
        spaceId: this.issue.spaceId,
        issueId: this.issue.id,
        state: !this.issue.essence,
      }).then((res) => {
        this.$store.dispatch('setCurrentIssue', format.formatIssue(res.data)); // 更新问题
        this.$message.success('加精成功');
      }).catch(() => {})
        .then(() => { this.isLoading.essence = false; });
    },
  },
};
</script>

<style></style>
